<template>
  <view class="tab-bar">
    <view class="tab-bar-border"></view>
    <template v-for="(item, index) in list" :key="index">
      <view class="tab-bar-item" @click="switchTab(item.pagePath)">
        <image :src="selected === index ? item.selectedIconPath : item.iconPath" class="tab-bar-icon" />
        <view class="tab-bar-text" :class="{ active: selected === index }">{{ item.text }}</view>
      </view>
      <!-- 在第 2 个 tab-bar-item 后面插入一个 view -->
      <view v-if="index === 1" class="after-element"></view>
    </template>
    <view class="tab-bar-center" @click="handleAdd">
      <image src="/static/icons/add.png" class="center-icon" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref(0)
const list = [
  {
    pagePath: "/pages/content/list",
    text: "内容",
    iconPath: "/static/icons/home.png",
    selectedIconPath: "/static/icons/home-c.png"
  },
  {
    pagePath: "/pages/tags/list",
    text: "标签",
    iconPath: "/static/icons/category.png",
    selectedIconPath: "/static/icons/category-c.png"
  },
  {
    pagePath: "/pages/tools/tools",
    text: "工具",
    iconPath: "/static/icons/tools.png",
    selectedIconPath: "/static/icons/tools-c.png"
  },
  {
    pagePath: "/pages/Song/Song",
    text: "歌曲",
    iconPath: "/static/icons/song.png",
    selectedIconPath: "/static/icons/song-c.png"
  },
]

const switchTab = (path) => {
  const url = path
  uni.redirectTo({
    url
  })
}

const handleAdd = () => {
  uni.navigateTo({
    url: '/pages/content/edit'
  })
}

const init = () => {
  const page = getCurrentPages().pop()
  const route = page ? page.route : 'pages/content/list'
  const index = list.findIndex(item => item.pagePath.includes(route))
  if (index !== -1) {
    selected.value = index
  }
}

init()
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;

  &-border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2rpx;
    background: rgba(0, 0, 0, 0.1);
  }

  &-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;

  }

  &-icon {
    width: 54rpx;
    height: 54rpx;
  }

  &-text {
    font-size: 20rpx;
    color: #7A7E83;

    &.active {
      color: #409EFF;
    }
  }

  &-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20rpx;
    width: 120rpx;
    height: 120rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 8rpx rgba(64, 158, 255, 0.3);

    .center-icon {
      width: 100%;
      height: 100%;
    }
  }
}

.after-element {
  flex: 1.2;
}
</style>